<?php $bodyClass = "discover" ; ?>
<?php require("../frame/frame_head_echo.php"); ?>

<div id="banner" class="container carousel slide banner ppt-12 br-4" data-ride="carousel">
	<ol class="carousel-indicators">
		<li data-target="#banner" data-slide-to="0" class="active"></li>
		<li data-target="#banner" data-slide-to="1"></li>
		<li data-target="#banner" data-slide-to="2"></li>
	</ol>

	<div class="carousel-inner">
		<div class="item active">
			<a href="#">
				<img src="../images/page_images/banner_1.png" alt="banner" />
			</a>
		</div>

		<div class="item">
			<a href="#">
				<img src="../images/page_images/banner_2.png" alt="banner" />
			</a>
		</div>

		<div class="item">
			<a href="#">
				<img src="../images/page_images/banner_3.png" alt="banner" />
			</a>
		</div>
	</div>

</div>

<div class="container discover-tip ppt-12 br-4 active">
	<div class="content cf">
		<h2 class="ht fl">探索更多内容请下载 echo回声 客户端</h2>
		<a href="#" class="ht fl btn download-btn">去下载</a>
	</div>
	<a href="#" class="ht btn close-btn">关闭</a>
</div>

<div class="container ppt-12">
	<ul class="voices-list cf">
		<li>
			<div class="voice-wp">
				<div class="voice-cover">
					<div class="voice-cover-wp">
						<img src="../images/page_images/voice_1.jpg" alt="voice-cover" />
						<div class="mask"></div>
						<i class="icon play-icon"></i>
						<time class="voice-length">3:19</time>
					</div>
					<a href="#" class="btn play-btn"></a>
				</div>
				<h3 class="voice-name"><a href="#">声音名称</a></h3>
				<div class="category"><a href="#">世界音乐</a>频道</div>
				<div class="ui-status cf">
					<small class="share" title="分享数目">372</small>
					<small class="like" title="喜欢数目">76</small>
					<small class="comment" title="评论数目">320</small>
				</div>
			</div>
		</li>

		<li>
			<div class="voice-wp">
				<div class="voice-cover">
					<div class="voice-cover-wp">
						<img src="../images/page_images/voice_2.jpg" alt="voice-cover" />
						<div class="mask"></div>
						<i class="icon play-icon"></i>
						<time class="voice-length">3:19</time>
					</div>
					<a href="#" class="btn play-btn"></a>
				</div>
				<h3 class="voice-name"><a href="#">声音名称</a></h3>
				<div class="category"><a href="#">世界音乐</a>频道</div>
				<div class="ui-status cf">
					<small class="share" title="分享数目">372</small>
					<small class="like" title="喜欢数目">76</small>
					<small class="comment" title="评论数目">320</small>
				</div>
			</div>
		</li>

		<li>
			<div class="voice-wp">
				<div class="voice-cover">
					<div class="voice-cover-wp">
						<img src="../images/page_images/voice_3.jpg" alt="voice-cover" />
						<div class="mask"></div>
						<i class="icon play-icon"></i>
						<time class="voice-length">3:19</time>
					</div>
					<a href="#" class="btn play-btn"></a>
				</div>
				<h3 class="voice-name"><a href="#">声音名称</a></h3>
				<div class="category"><a href="#">世界音乐</a>频道</div>
				<div class="ui-status cf">
					<small class="share" title="分享数目">372</small>
					<small class="like" title="喜欢数目">76</small>
					<small class="comment" title="评论数目">320</small>
				</div>
			</div>
		</li>

		<li>
			<div class="voice-wp">
				<div class="voice-cover">
					<div class="voice-cover-wp">
						<img src="../images/page_images/voice_4.jpg" alt="voice-cover" />
						<div class="mask"></div>
						<i class="icon play-icon"></i>
						<time class="voice-length">3:19</time>
					</div>
					<a href="#" class="btn play-btn"></a>
				</div>
				<h3 class="voice-name"><a href="#">声音名称</a></h3>
				<div class="category"><a href="#">世界音乐</a>频道</div>
				<div class="ui-status cf">
					<small class="share" title="分享数目">372372</small>
					<small class="like" title="喜欢数目">765546</small>
					<small class="comment" title="评论数目">320982</small>
				</div>
			</div>
		</li>

		<li>
			<div class="voice-wp">
				<div class="voice-cover">
					<div class="voice-cover-wp">
						<img src="../images/page_images/voice_5.jpg" alt="voice-cover" />
						<div class="mask"></div>
						<i class="icon play-icon"></i>
						<time class="voice-length">3:19</time>
					</div>
					<a href="#" class="btn play-btn"></a>
				</div>
				<h3 class="voice-name"><a href="#">声音名称</a></h3>
				<div class="category"><a href="#">世界音乐</a>频道</div>
				<div class="ui-status cf">
					<small class="share" title="分享数目">372</small>
					<small class="like" title="喜欢数目">76</small>
					<small class="comment" title="评论数目">320</small>
				</div>
			</div>
		</li>

		<li>
			<div class="voice-wp">
				<div class="voice-cover">
					<div class="voice-cover-wp">
						<img src="../images/page_images/voice_6.jpg" alt="voice-cover" />
						<div class="mask"></div>
						<i class="icon play-icon"></i>
						<time class="voice-length">3:19</time>
					</div>
					<a href="#" class="btn play-btn"></a>
				</div>
				<h3 class="voice-name"><a href="#">声音名称</a></h3>
				<div class="category"><a href="#">世界音乐</a>频道</div>
				<div class="ui-status cf">
					<small class="share" title="分享数目">372</small>
					<small class="like" title="喜欢数目">76</small>
					<small class="comment" title="评论数目">320</small>
				</div>
			</div>
		</li>

		<li>
			<div class="voice-wp">
				<div class="voice-cover">
					<div class="voice-cover-wp">
						<img src="../images/page_images/voice_1.jpg" alt="voice-cover" />
						<div class="mask"></div>
						<i class="icon play-icon"></i>
						<time class="voice-length">3:19</time>
					</div>
					<a href="#" class="btn play-btn"></a>
				</div>
				<h3 class="voice-name"><a href="#">声音名称</a></h3>
				<div class="category"><a href="#">世界音乐</a>频道</div>
				<div class="ui-status cf">
					<small class="share" title="分享数目">372</small>
					<small class="like" title="喜欢数目">76</small>
					<small class="comment" title="评论数目">320</small>
				</div>
			</div>
		</li>

		<li>
			<div class="voice-wp">
				<div class="voice-cover">
					<div class="voice-cover-wp">
						<img src="../images/page_images/voice_2.jpg" alt="voice-cover" />
						<div class="mask"></div>
						<i class="icon play-icon"></i>
						<time class="voice-length">3:19</time>
					</div>
					<a href="#" class="btn play-btn"></a>
				</div>
				<h3 class="voice-name"><a href="#">声音名称</a></h3>
				<div class="category"><a href="#">世界音乐</a>频道</div>
				<div class="ui-status cf">
					<small class="share" title="分享数目">372</small>
					<small class="like" title="喜欢数目">76</small>
					<small class="comment" title="评论数目">320</small>
				</div>
			</div>
		</li>

		<li>
			<div class="voice-wp">
				<div class="voice-cover">
					<div class="voice-cover-wp">
						<img src="../images/page_images/voice_3.jpg" alt="voice-cover" />
						<div class="mask"></div>
						<i class="icon play-icon"></i>
						<time class="voice-length">3:19</time>
					</div>
					<a href="#" class="btn play-btn"></a>
				</div>
				<h3 class="voice-name"><a href="#">声音名称</a></h3>
				<div class="category"><a href="#">世界音乐</a>频道</div>
				<div class="ui-status cf">
					<small class="share" title="分享数目">372</small>
					<small class="like" title="喜欢数目">76</small>
					<small class="comment" title="评论数目">320</small>
				</div>
			</div>
		</li>

		<li>
			<div class="voice-wp">
				<div class="voice-cover">
					<div class="voice-cover-wp">
						<img src="../images/page_images/voice_4.jpg" alt="voice-cover" />
						<div class="mask"></div>
						<i class="icon play-icon"></i>
						<time class="voice-length">3:19</time>
					</div>
					<a href="#" class="btn play-btn"></a>
				</div>
				<h3 class="voice-name"><a href="#">声音名称</a></h3>
				<div class="category"><a href="#">世界音乐</a>频道</div>
				<div class="ui-status cf">
					<small class="share" title="分享数目">372</small>
					<small class="like" title="喜欢数目">76</small>
					<small class="comment" title="评论数目">320</small>
				</div>
			</div>
		</li>

		<li>
			<div class="voice-wp">
				<div class="voice-cover">
					<div class="voice-cover-wp">
						<img src="../images/page_images/voice_5.jpg" alt="voice-cover" />
						<div class="mask"></div>
						<i class="icon play-icon"></i>
						<time class="voice-length">3:19</time>
					</div>
					<a href="#" class="btn play-btn"></a>
				</div>
				<h3 class="voice-name"><a href="#">声音名称</a></h3>
				<div class="category"><a href="#">世界音乐</a>频道</div>
				<div class="ui-status cf">
					<small class="share" title="分享数目">372</small>
					<small class="like" title="喜欢数目">76</small>
					<small class="comment" title="评论数目">320</small>
				</div>
			</div>
		</li>

		<li>
			<div class="voice-wp">
				<div class="voice-cover">
					<div class="voice-cover-wp">
						<img src="../images/page_images/voice_6.jpg" alt="voice-cover" />
						<div class="mask"></div>
						<i class="icon play-icon"></i>
						<time class="voice-length">3:19</time>
					</div>
					<a href="#" class="btn play-btn"></a>
				</div>
				<h3 class="voice-name"><a href="#">声音名称</a></h3>
				<div class="category"><a href="#">世界音乐</a>频道</div>
				<div class="ui-status cf">
					<small class="share" title="分享数目">372</small>
					<small class="like" title="喜欢数目">76</small>
					<small class="comment" title="评论数目">320</small>
				</div>
			</div>
		</li>
	</ul>

	<ul class="pagination">
		<li class="prev disabled"><span><img src="../images/page_nav_prev.png" alt="prev" /></span></li>
		<li class="active"><a href="#" data-page="0">1</a></li>
		<li><a href="#" data-page="1">2</a></li>
		<li><a href="#" data-page="2">3</a></li>
		<li><a href="#" data-page="3">4</a></li>
		<li><a href="#" data-page="4">5</a></li>
		<li><a href="#" data-page="5">6</a></li>
		<li><a href="#" data-page="6">7</a></li>
		<li><a href="#" data-page="7">8</a></li>
		<li><a href="#" data-page="8">9</a></li>
		<li><a href="#" data-page="9">10</a></li>
		<li class="next"><a href="#" data-page="1"><img src="../images/page_nav_next.png" alt="next" /></a></li>
	</ul>
</div>

<script type="text/javascript" src="../js/carousel.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('.carousel').carousel({
			interval: 3000
		})

		$('.discover-tip .close-btn').on('click', function(e) {
			e.preventDefault();
			$('.discover-tip').removeClass('active');
		});
	});
</script>

<?php require("../frame/frame_foot.php"); ?>